<template>
  <div class="user">
    <div class="avatar">
      <!-- 登录框 -->
      <el-popover placement="bottom" width="330" trigger="click" v-if="!userInfo.avatarUrl">
        <!-- <input type="text" class="phoneNum" />
            <input type="password" class="password" /> -->
        <el-form ref="form" v-model="loginForm" label-width="80px" label-position="right" size="mini">
          <el-form-item label="手机号码：" size="mini" label-width="100px" required>
            <input type="text" v-model="loginForm.phoneNum" />
          </el-form-item>
          <el-form-item label="密码：" size="mini" label-width="100px" required>
            <input type="password" v-model="loginForm.password" />
          </el-form-item>
          <div class="loginButton">
            <el-button type="danger" @click="login" size="mini">登录</el-button>
          </div>
          <div class="regEnter" @click="isRegisteredShow = true">注册</div>
        </el-form>
        <!-- <el-button slot="reference">click 激活</el-button> -->
        <img src="@/assets/img/test.jpg" alt="" slot="reference" @click="isPopoverShow = !isPopoverShow" />
      </el-popover>
      <!-- 已登录状态 -->
      <el-popover placement="bottom" trigger="click" v-else v-model="isPopoverShow">
        <img :src="userInfo.avatarUrl" alt="" slot="reference" />
        <div class="loginButton">
          <el-button size="mini" type="info" class="logout" @click="logout">退出登录</el-button>
        </div>
      </el-popover>
    </div>
    <div class="userName" v-if="userInfo.nickname">
      {{ userInfo.nickname }}
    </div>
    <div class="userName" v-else>点击头像登录</div>
    <!-- 注册框组件 -->
    <registered :isDialogShow="isRegisteredShow" @closeRegistered="closeRegistered"></registered>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'userInfo',
  props: {},
  setup() {
    const data = reactive({
      loginForm: {
        password: '',
        phoneNum: ''
      },
      userInfo: {},
      isPopoverShow: false,

      // 是否显示注册框
      isRegisteredShow: false
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style scoped>
@import './HeaderBar-element.css';
.user {
  display: flex;
  align-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 7px;
  cursor: pointer;
}

.avatar img {
  width: 100%;
}

.userName {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  width: 100px;
}

.loginButton {
  width: 100%;
  text-align: center;
}

.loginButton .el-button {
  width: 200px;
}

.el-form ::v-deep(.el-form-item__label) {
  font-size: 13px !important;
}
.regEnter {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
</style>